<template>
	<view class="content-box">
		<view class="top">
			<view class="left_box" @click="back">
				<image src="../../static/images/icon/fh.png" style="width: 40rpx;margin-top: 25rpx;" mode="widthFix"></image>
			</view>
			<view class="left_title">
				{{info.name}}
			</view>
		</view>
		<view class="mt150"></view>
		<view class="topic_info">
			<view class="lable" v-if="questspra.qtype==1">单选题</view>
			<view class="lable" v-if="questspra.qtype==2">多选题</view>
			<view class="lable" v-if="questspra.qtype==3">判断题</view>
			<view class="lable" v-if="questspra.qtype==4">填空题</view>
			<view class="lable" v-if="questspra.qtype==5">简答</view>
			<view class="num">{{questIndex+1}}/<text style="color: #c6c6c6;">{{info.chouquNum}}</text></view>
		</view>
		<view class="topic_detail">
			<view class="title">
				<text class="index">{{questIndex+1}}、
				<!-- <text class="score">2分</text> -->
				</text> {{questspra.topic}}
			</view>
			<image v-if="questspra.topicType&&questspra.topicType=='image'" :src="questspra.topicTypeFile" class="images"></image> 
			<view v-for="(item,index) in questspra.options" :key="index" >
				<!-- 单选与判断题 -->
				<view v-if="questspra.qtype==1||questspra.qtype==3">
					<view v-if="questspra.userAnswer==item.id" class="title se">
						<view class="b1">
							<text v-if="index==0">A</text>
							<text v-if="index==1">B</text>
							<text v-if="index==2">C</text>
							<text v-if="index==3">D</text>
							<text v-if="index==4">E</text>
							<text v-if="index==5">F</text>
						<view class="line"></view>
						</view>
						<view class="b2">{{item.optionText}}</view>
					</view> 
					<view v-if="questspra.userAnswer!=item.id" class="title def">
					 	<view class="b1">
					 		<text v-if="index==0">A</text>
					 		<text v-if="index==1">B</text>
					 		<text v-if="index==2">C</text>
					 		<text v-if="index==3">D</text>
					 		<text v-if="index==4">E</text>
					 		<text v-if="index==5">F</text>
					 	<view class="line"></view>
					 	</view>
					 	<view class="b2">{{item.optionText}}</view>
					</view>
				</view>
				<!-- 多选题 -->
				<view v-if="questspra.qtype==2">
					<view v-if="questspra.userAnswer&&questspra.userAnswer.includes(item.id)" class="title se">
						<view class="b1">
							<text v-if="index==0">A</text>
							<text v-if="index==1">B</text>
							<text v-if="index==2">C</text>
							<text v-if="index==3">D</text>
							<text v-if="index==4">E</text>
							<text v-if="index==5">F</text>
						<view class="line"></view>
						</view>
						<view class="b2">{{item.optionText}}</view>
					</view> 
					<view v-else class="title def">
					 	<view class="b1">
					 		<text v-if="index==0">A</text>
					 		<text v-if="index==1">B</text>
					 		<text v-if="index==2">C</text>
					 		<text v-if="index==3">D</text>
					 		<text v-if="index==4">E</text>
					 		<text v-if="index==5">F</text>
					 	<view class="line"></view>
					 	</view>
					 	<view class="b2">{{item.optionText}}</view>
					</view>
				</view>
			</view> 
			<view style="width: 100%;float: left;height: 60rpx;"></view>
		</view>
		<view v-if="showJX">
			<view class="dtk_item magin_top20" >
				<view class="title">
					答案
				</view>
				<view class="dan-box"> 
					<view class="item">
						正确答案：<text class="success">{{jxInfo.isCollect}}</text>
					</view>
					<view class="item">
						您的答案：
						<text class="error" v-if="jxInfo.isCollect!=jxInfo.userAnswer" >{{jxInfo.userAnswer}}</text>
						<text class="success" v-if="jxInfo.isCollect==jxInfo.userAnswer" >{{jxInfo.userAnswer}}</text>
					</view>
				</view>
				<image v-if="jxInfo.isCollect!=jxInfo.userAnswer" src="../../static/training/error.png" class="error_img" mode="widthFix"></image> 
				<view class="left_30"></view>
			</view>
			<view class="dtk_item magin_top20" >
				<view class="title">
					解析
				</view>
				<view class="title" style="font-size: 28rpx;line-height 30rpx;height:auto;margin-top: 10rpx;">
					{{questspra.analysis}}
				</view>
				<!-- <image  src="../../static/training/img001.png" class="zsd_img" mode="widthFix"></image> -->
				<!-- <view class="title">
					知识点
				</view>
				<view class="zsd_item">
					<view class="dian"></view> <view class="value">图定运行的规律</view>
				</view>
				<view class="zsd_item">
					<view class="dian"></view> <view class="value">列车时刻表调整的规律</view>
				</view>
				<view class="zsd_ing">本题有1022人做过，146人做错</view> -->
				<view class="left_30"></view>
			</view>
			<!-- <view class="topic_detail">
				<view class="title">
					相关知识点
				</view>
				<view class="title">
					图定客车(空车底)运行时刻调整，长沙~北京西Z2次，北京西终到时刻由8:00调整为()
				</view>
				<image src="../../static/training/img001.png" class="images"></image>
				<image src="../../static/training/img001.png" class="images"></image>
				<view class="title">
					答案：新的列车时刻表调整
				</view>
				<view style="width: 100%;float: left;height: 60rpx;"></view>
			</view> -->
		</view>
		<view class="bottom">
			<view class="item" @click="upQ">
				<view class="b1">
					<image src="../../static/training/up.png" class="b2" mode="widthFix"></image>
				</view>
				<view class="b3">
					上一题
				</view>
			</view> 
			<view class="item" @click="scantron()">
				<view class="b1">
					<image src="../../static/training/dtk.png" class="b2" mode="widthFix"></image>
				</view>
				<view class="b3">
					答题卡
				</view>
			</view>
			<view class="item" @click="analysis">
				<view class="b1">
					<image src="../../static/training/jx.png" class="b2" mode="widthFix"></image>
				</view>
				<view class="b3">
					解析
				</view>
			</view>
			<view class="item" @click="downQ">
				<view class="b1">
					<image src="../../static/training/next.png" class="b2" mode="widthFix"></image>
				</view>
				<view class="b3">
					下一题
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myPracticeRecordsDetail
	} from "@/common/api/training/training.js";
	export default {
		data() {
			return { 
				info:{
					chouquNum:0,
					hasScores:100,
					id:'',
					name:'',
					questNum:'',
					roundedValue:'',
					time:null,
				},
				questList:{},
				questspra:{},
				questIndex:0,
				m:-1,
				s:59,
				timeStr:'',
				isOver:false,
				time:0,
				showJX:false,
				jxInfo:{
					
				},
				interval:null
			};
		},
		onLoad(query) { 
			if(query.name){
				this.info.name=query.name
			}
			if(query.id&&query.index){
				this.questIndex=parseInt(query.index);
				console.log(this.questIndex)
				var this_=this;
				myPracticeRecordsDetail({
					 "id":query.id
					}).then((res) => {
					if (res && res.code == 200 && res.data) { 
						this.questList=res.data; 
						this.questspra=res.data.questspra[this.questIndex];
						this.info.chouquNum=res.data.questspra.length; 
						uni.setStorageSync('questspra_lx',this.questList)
					}
				}); 
			}
		},
		 
		methods: { 
			back(){ 
				uni.navigateBack({
					delta: 1
				});
			},
			scantron(){
				uni.navigateTo({
					url:"/pages/training/practice_scantron"
				})
			},
			getIndex(a){
				if(a==0){
					return "A";
				}else if(a==1){
					return "B";
				}else if(a==2){
					return "C";
				}else if(a==3){
					return "D";
				}else if(a==4){
					return "E";
				}else if(a==5){
					return "F";
				}else {
					return "G"
				}
			}, 
			timeSet(){ 
				if(this.info.time&&!this.isOver){
					this.time++;
					uni.setStorageSync('timelong',this.time)
					if(this.m==-1){
						this.m=this.info.time-1;
						this.s=59;
					}else{
						this.s--;
						if(this.s==0){
							this.m--;
							this.s=59
						}
					}
					if(this.m<0){ 
						this.isOver=true;
						uni.setStorageSync('questspra_lx',this.questList); 
						uni.reLaunch({
							url: '/pages/training/scantron' 
						});
						return;
					}
					let t=this.m+":";
					if(this.s<10){
						t=t+"0"+this.s;
					}else{
						t=t+this.s; 
					}
					this.timeStr=t; 
				} 
			},
			indexQ(index){
				this.questIndex=index;
				this.questspra=this.questList.questspra[this.questIndex]; 
			},
			upQ(){
				console.log(this.questIndex)
				if(this.questIndex==0){
					uni.showToast({
						title: '已是第一题',
						icon:'none'
					});
					return;
				}
				this.questIndex--;
				this.questspra=this.questList.questspra[this.questIndex]; 
				//this.showJX=false;
				this.analysisInfo();
			},
			downQ(){ 
				console.log(this.questIndex)
				if(this.questIndex>=this.questList.questspra.length-1){
					uni.showToast({
						title: '已是第后一题',
						icon:'none'
					});
					return;
				}
				this.questIndex++; 
				this.questspra=this.questList.questspra[this.questIndex]; 
				// if(this.questspra.options.length>3){
				// 	this.questspra.qtype=2;
				// }
				//this.showJX=false;
				this.analysisInfo();
			},analysis(){
				if(this.showJX){
					this.showJX=false;
				}else{
					this.showJX=true;
					this.analysisInfo();
				} 
			},analysisInfo(){
				let isCollect="";//正确答案
				let userAnswer="";//用户答案
				//单选、多选、判断题
				if(this.questspra.qtype==1||this.questspra.qtype==2||this.questspra.qtype==3){
					var arr=null;
					if(this.questspra.userAnswer){
						arr=this.questspra.userAnswer.split(",");
					} 
					
					for(var i=0;i<this.questspra.options.length;i++){
						var obj=this.questspra.options[i];
						if(obj.isCollect==1){
							if(isCollect==""){
								isCollect=this.getIndex(i);
							}else{
								isCollect=isCollect+","+this.getIndex(i);
							}
						} 
						if(arr){
							//获取回答的答案
							for(var d=0;d<arr.length;d++){
								if(arr[d]==obj.id){ 
									if(userAnswer==""){
										userAnswer=this.getIndex(i);
									}else{
										userAnswer=userAnswer+","+this.getIndex(i);
									}
								}
							}
						}
					}
				}
				this.jxInfo.isCollect=isCollect;
				this.jxInfo.userAnswer=userAnswer;
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import url("../../common/base.css");
	@import url("./topic.scss");
	
</style>